<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="项目名称">
        <el-input v-model="formInline.name" placeholder="项目名称"></el-input>
      </el-form-item>
      <el-form-item label="项目编号">
        <el-input v-model="formInline.numbering" placeholder="项目编号" @click="handleRightClick()"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain icon="el-icon-search" size="mini" @click="onSubmit">查询</el-button>
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
        <el-button type="primary" plain icon="el-icon-document-add" size="mini" @click="handleAdd">导入</el-button>
        <el-button type="primary" plain icon="el-icon-printer" size="mini" @click="handleAdd">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table max-height="300" style="height: 300px" v-loading="loading" :data="roleList" icon="warning">
      <el-table-column label="费用类型" prop="val1">
        <template slot-scope="scope">
          <el-input
            style="width: 100%"
            v-model="scope.row.val1"
            placeholder="请输入内容"
            @change="val1Change(scope.row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="列支项目" prop="val2">
        <template slot-scope="scope">
          <el-input
            style="width: 100%"
            v-model="scope.row.val2"
            placeholder="请输入内容"
            @change="val2Change(scope.row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="金额" prop="val3">
        <template slot-scope="scope">
          <el-input style="width: 100%" v-model="scope.row.val3" placeholder="请输入内容" :disabled="true"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="公司账套科目" prop="val98" align="center">
        <template slot="header">
          公司账套科目
          <el-tooltip class="item" effect="dark" content="操作数据" placement="bottom">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <div style="width: 100%" @click="SetAccountsClick(scope.row)">
            {{ scope.row.val98 ? scope.row.val98 : '请点击选择' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="val99">
        <template slot-scope="scope">
          <el-input type="textarea" autosize placeholder="请输入内容" v-model="scope.row.val99"> </el-input>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="" width="100">
        <template slot="header">
          操作
          <el-tooltip class="item" effect="dark" content="操作数据" placement="bottom">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-button @click="DelClick(scope.row)" type="text" size="small">删除</el-button>
          <el-button @click="Detail(scope.row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- :rules="rules" -->
    <el-form v-for="item in oldList" ref="form" :model="item" label-width="110px">
      <el-row>
        <el-divider content-position="left">预算说明:</el-divider>
        <!-- <el-alert title="预算说明" type="success"> </el-alert> -->
        <el-col :span="4">
          <el-form-item label="费用类型">
            <el-input v-model="item.val1" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="列支项目">
            <el-input v-model="item.val2" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="公司账套科目">
            <el-input v-model="item.val98" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="金额1" prop="val4">
            <el-input v-model="item.val4" @change="AMTChange(item)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="金额2">
            <el-input v-model="item.val5" @change="AMTChange(item)"></el-input>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="4">
          <el-form-item
            v-for="(domain, index) in oldList"
            :label="'域名' + index"
            :key="domain.key"
            :prop="'domains.' + index + '.value'"
          >
            <el-input v-model="item.val6"></el-input>
          </el-form-item>
        </el-col> -->

        <el-col :span="2">
          <el-form-item>
            <el-button @click="addDomain(item)">新增</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="金额3">
            <el-input v-model="item.val6" @change="AMTChange(item)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="备注">
            <el-input type="textarea" autosize placeholder="请输入内容" v-model="item.val99"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <Dialogs :dialogVisible.sync="dialogVisible" :upoldid="upoldid" />
    <SetAccountsDialog v-on:transfer="getUser" :SetAccountsVisible.sync="SetAccountsVisible" :upoldid="upoldid" />
  </div>
</template>

<script>
import Dialogs from './components/Dialog.vue'
import SetAccountsDialog from './components/SetAccountsDialog.vue'

export default {
  name: 'codeRule',
  components: {
    Dialogs,
    SetAccountsDialog
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 表格数据
      roleList: [
        { oldid: '1', val1: '一、经营费用', val2: '业务招待', val3: '', val98: 'cs' },
        { oldid: '2', val1: '', val2: '差旅费', val3: '', val98: '' },
        { oldid: '3', val1: '', val2: '车辆费', val3: '', val98: '' },
        { oldid: '4', val1: '二、其他费用', val2: '包装费', val3: '', val98: '' },
        { oldid: '5', val1: '', val2: '快递费', val3: '', val98: '' },
        { oldid: '6', val1: '', val2: '业务招待', val3: '', val98: '' }
      ],
      // 表单数据
      oldList: [
        { oldid: '1', val1: '一、经营费用', val2: '业务招待', val4: '', val5: '', val6: '' },
        { oldid: '2', val1: '', val2: '差旅费', val4: '', val5: '', val6: '' },
        { oldid: '3', val1: '', val2: '车辆费', val4: '', val5: '', val6: '' },
        { oldid: '4', val1: '二、其他费用', val2: '包装费', val4: '', val5: '', val6: '' },
        { oldid: '5', val1: '', val2: '快递费', val4: '', val5: '', val6: '' },
        { oldid: '6', val1: '', val2: '业务招待', val4: '', val5: '', val6: '' }
      ],
      // 查询数据
      formInline: {
        name: '',
        numbering: ''
      },
      // id值
      oldid: '',
      // 弹框值
      dialogVisible: false,
      SetAccountsVisible: false,
      // 点击详情id
      upoldid: ''
      // rules: {
      //   val4: [{ required: true, type: 'number', message: '年龄必须为数字值' }]
      // }
    }
  },
  created() {
    this.loading = false
  },
  methods: {
    getUser(msg) {
      console.log(this.upoldid)
      console.log(msg)
      this.roleList.forEach((item, index) => {
        if (item.oldid == this.upoldid.oldid) {
          var data = ''
          msg.forEach((items, index) => {
            if (index == 0) {
              data += items
            } else {
              data += ',' + items
            }
          })

          item.val98 = data

          // Vue.set(this.roleList, index, item)
          // this.$set(this.roleList, index, item)
        }
      })
    },
    // 新增按钮操作
    handleAdd(row) {
      this.$message.success('添加')
      console.log(row)
      this.oldid = 'id-' + new Date().getTime().toString(36) + '-' + Math.random().toString(36).substr(2, 9)
      this.roleList.push({
        oldid: this.oldid,
        val1: '',
        val2: '',
        val3: ''
      })
      this.oldList.push({
        oldid: this.oldid,
        val1: '',
        val2: '',
        val3: ''
      })
    },
    // 点击删除
    DelClick(row) {
      console.log(row.oldid)
      this.roleList = this.roleList.filter(item => item.oldid != row.oldid)
      this.oldList = this.oldList.filter(item => item.oldid != row.oldid)
    },
    val1Change(row) {
      console.log(row.oldid)
      this.roleList.forEach(item => {
        if (item.oldid == row.oldid) {
          this.oldList.forEach(items => {
            if (items.oldid == row.oldid) {
              items.val1 = item.val1
            }
          })
        }
      })
    },
    val2Change(row) {
      console.log(row.oldid)
      this.roleList.forEach(item => {
        if (item.oldid == row.oldid) {
          this.oldList.forEach(items => {
            if (items.oldid == row.oldid) {
              items.val2 = item.val2
            }
          })
        }
      })
    },
    addDomain(row) {
      console.log(row)
      this.oldList.forEach(item => {
        if (row.oldid == item.oldid) {
          var a = 'value' + this.oldid
          console.log(a)
          item = {
            ...item,
            value: ''
          }
          console.log(item)
        }
      })
      // this.oldList.push({
      //   value: '',
      //   key: Date.now()
      // })
    },
    AMTChange(row) {
      console.log(row)

      this.oldList.forEach(items => {
        if (items.oldid == row.oldid) {
          this.roleList.forEach(item => {
            if (item.oldid == row.oldid) {
              item.val3 = Number(items.val4) + Number(items.val5) + Number(items.val6)
            }
          })
        }
      })
    },
    Detail(row) {
      console.log(row.oldid)
      this.upoldid = row.oldid
      this.dialogVisible = true
    },
    SetAccountsClick(row) {
      // console.log(1)
      // this.upoldid = row.oldid
      this.upoldid = row

      this.SetAccountsVisible = true
    },
    // 点击查询
    onSubmit() {
      console.log('submit!')
    },
    handleRightClick(e) {
      // e.preventDefault() // 阻止默认的上下文菜单弹出
      console.log('右键点击事件被触发')
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.roleId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    }
  }
}
</script>

<style scoped>
.el-icon-question {
  color: rgb(230, 162, 60);
  /* background-color: rgb(230, 162, 60); */
}
</style>
